<template>
  <div class="box">
    <el-card class="dataCard">
      <div slot="header" class="clearfix">
        <span>文章总数</span>
      </div>
      <div>
        <span class="numerator">{{ total }}</span>
        <span style="margin-right: 12%">篇</span>
        <span class="svgBox">
          <svg
            t="1689927007878"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6231"
            id="mx_n_1689927007880"
            width="64"
            height="64"
          >
            <path
              d="M75.851852 948.148148V0H0v1024h1024v-75.851852H75.851852z"
              fill="#303133"
              p-id="6232"
              :fill-opacity="opacity"
            ></path>
            <path
              d="M408.841481 685.700741l227.555556 151.703703 225.28-451.318518 79.644444 46.26963V84.954074L640.18963 258.654815l89.505185 51.579259-152.462222 305.682963-227.555556-151.703704-190.388148 380.017778 136.533333 67.508148 113.019259-226.038518z"
              fill="#303133"
              p-id="6233"
              :fill-opacity="opacity"
            ></path>
          </svg>
        </span>
        <span class="addbox">+{{ addCount }}</span>
      </div>
    </el-card>
    <el-card class="dataCard">
      <div slot="header" class="clearfix">
        <span>总浏览量</span>
      </div>
      <div class="fraction2">
        <!-- 字体大小参照物 -->
        <span class="fontBox" :title="viewCount">
          <ScrollNumber class="scrollNumber" :value="viewCount"></ScrollNumber>
        </span>
      </div>
    </el-card>
    <el-card class="dataCard">
      <div slot="header" class="clearfix">
        <span>月度计划</span>
      </div>
      <div class="fraction">
        <span class="numerator">{{ count }}</span>
        <span class="denominator">/{{ goal }}</span>
        <span class="unit">篇</span>
      </div>
      <div>
        <el-progress
          :text-inside="true"
          :stroke-width="26"
          :percentage="percent"
          :text-color="'#fff'"
        ></el-progress>
      </div>
    </el-card>
    <el-card class="dataCard">
      <div slot="header" class="clearfix">
        <span>评论总数</span>
      </div>
      <div class="fraction2">
        <!-- 字体大小参照物 -->
        <span class="fontBox" :title="commitCount">
          <ScrollNumber class="scrollNumber" :value="commitCount"></ScrollNumber>
        </span>
      </div>
    </el-card>
  </div>
</template>

<script>
import ScrollNumber from './ScrollNumber.vue'
import { articleApi } from '../apis/article'
const useArticleApi = articleApi()
export default {
  name: 'CountData',
  components: {
    ScrollNumber
  },
  data () {
    return {
      count: 0,
      percent: 0,
      goal: 50,
      today: 0,
      total: 0,
      opacity: 0,
      addCount: 0,
      viewCount: 17983,
      commitCount: 1271
    }
  },
  methods: {
    getMouthCount () {
      useArticleApi.getMouthCount().then((res) => {
        if (res && res.code === 200) {
          this.count = res.data[0].count
          const percentStr = (this.count / this.goal) * 100
          this.percent = Number(percentStr.toFixed(2))
        }
      })
    },
    getArticle () {
      useArticleApi.getArticle({ page: 1, pageSize: 1 }).then((res) => {
        if (res && res.code === 200) {
          this.total = res.data.total
        }
      })
    },
    getArticleCount () {
      useArticleApi.getArticleCount().then((res) => {
        if (res && res.code === 200) {
          const lastDay = new Date(res.data[res.data.length - 1].date)
          const nowDay = new Date()
          if (
            lastDay.getFullYear() === nowDay.getFullYear() &&
            lastDay.getMonth() === nowDay.getMonth() &&
            lastDay.getDate() === nowDay.getDate()
          ) {
            this.addCount = res.data[res.data.length - 1].count
          }
        }
      })
    }
  },
  mounted () {
    this.getArticleCount()
    this.getArticle()
    this.getMouthCount()
    const interval = setInterval(() => {
      if (this.opacity < 1) {
        this.opacity += 0.1
      } else {
        clearInterval(interval)
      }
    }, 100)
  }
}
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow:row wrap;
  justify-content: space-around;
}
.addbox {
  position: relative;
  bottom: 40px;
  right: -30px;
}
@media screen and (min-width:1500px){
  .dataCard {
    width: 22%;
    height:100%;
  }
}
@media screen and (min-width:1000px) and (max-width:1501px) {
  .dataCard {
    width: 49%;
    height:48%;
  }
}
@media screen and (max-width:1000px) {
  .dataCard {
    width: 98%;
    height:24%;
  }
}
.fraction {
  margin-top: -15px;
  display: flex;
  align-items: baseline;
}
.fraction span {
  display: block;
}
.fraction2 {
  margin-top: 15px;
  display: flex;
  align-items: baseline;
}
.fontBox {
  width: 100%;
  font-size: 3.5em;
  cursor: pointer;
  overflow: hidden;
}
.numerator {
  font-size: 3.5em;
  font-weight: bold;
}
.scrollNumber {
  width: 100%;
  font-weight: bold;
}
.denominator {
  font-size: 0.8em;
  position: relative;
  top: -0.2em;
  transform: scale(0.8);
}
.unit {
  margin-left: 20px;
  font-size: 2.8em;
  position: relative;
  top: -0.1em;
}
</style>
